<template>
  <div style="padding: 24px;">
    <h3>流程图预览</h3>
    <div style="display: flex; align-items: center; flex-wrap: wrap;">
      <template v-for="(node, idx) in nodes" :key="node.id">
        <div style="
          border: 1px solid #1890ff;
          border-radius: 6px;
          padding: 12px;
          min-width: 120px;
          text-align: center;
          background: #f0f5ff;
          margin: 8px;
        ">
          <div>{{ node.name }}</div>
          <div style="font-size: 12px; color: #888;">{{ node.type }}</div>
          <div style="font-size: 12px; color: #888;">{{ node.role }}</div>
        </div>
        <span v-if="idx < nodes.length - 1" style="font-size: 24px; margin: 0 8px;">→</span>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
interface WorkflowNode {
  id: number | string
  name: string
  type: string
  role?: string
  employee?: string
  x?: number
  y?: number
}

interface Props {
  nodes: WorkflowNode[]
}

defineProps<Props>()
</script>

<style scoped>
/* 可以添加额外的样式 */
</style> 